<template>
  <div id="vuepress-theme-blog__post-layout">
    <article
      class="vuepress-blog-theme-content"
      itemscope
      itemtype="https://schema.org/BlogPosting"
    >
      <header>
        <h1 class="post-title" itemprop="name headline">
          {{ $frontmatter.title }}
        </h1>
        <PostMeta
          :tags="$frontmatter.tags"
          :author="$frontmatter.author"
          :date="$frontmatter.date"
          :location="$frontmatter.location"
          :reading="$page.readingTime"
        />
      </header>
      <div class="last-update-time-wrapper">
        <time
          dateUpdated
          itemprop="dateUpdated"
          :datetime="$page.lastUpdated"
          class="post-meta-last-update-time"
        >
          最后修改时间：{{ $page.lastUpdated }}
        </time>
      </div>
      <Content itemprop="articleBody" />

      <div class="article-status" :class="$frontmatter.waiting?'undone':''">{{ $frontmatter.waiting ? "- 更新中 -" : "- 全文完 -" }}</div>
      <footer>
        <Newsletter v-if="$service.email.enabled" />
        <hr />
        <div class="comment-title">{{ $frontmatter.comment === false ? "留言已关闭" : "留下一条留言?" }}</div>
        <Comment />
      </footer>
    </article>
    <Toc />
  </div>
</template>

<script>
import Toc from "@theme/components/Toc.vue";
import PostMeta from "@theme/components/PostMeta.vue";
// import PageInfo from '@mr-hope/vuepress-plugin-comment/lib/client/PageInfo.vue'
import Comment from "@mr-hope/vuepress-plugin-comment/lib/client/Comment.vue";
import zoom from "medium-zoom";

export default {
  components: {
    Toc,
    PostMeta,
    // PageInfo,
    Comment,
    Newsletter: () => import("@theme/components/Newsletter.vue"),
  },
  data: () => ({ zoom: null }),
  mounted() {
    this.updateZoom();
  },

  // updated () {
  //   this.updateZoom()
  // },

  methods: {
    updateZoom() {
      setTimeout(() => {
        if (this.zoom) {
          this.zoom.detach();
        }
        this.zoom = zoom(".content__default:not(.custom) img", {
          margin: 16,
        });
      }, 1000);
    },
  },
};
</script>

<style lang="stylus">
@require '../styles/wrapper.styl';

.vuepress-blog-theme-content {
  @extend $wrapper;
  font-size: 16px;
  letter-spacing: 0px;
  font-family: PT Serif, Serif;
  color: $textColor;
  position: relative;

  @media (min-width: $MQNarrow) {
    // box-shadow 0 10px 20px rgba(0, 0, 0, 0.05), 0 6px 6px rgba(0, 0, 0, 0.07)
  }

  .post-title {
    padding-top: 0;
  }
}

@media (max-width: $MQMobile) {
  .vuepress-blog-theme-content {
    padding-top: 0;
  }

  .post-title {
    margin-top: 0;
  }
}

.medium-zoom-overlay {
  z-index: 100;
}

.medium-zoom-overlay ~ img {
  z-index: 101;
}

.last-update-time-wrapper
  color: #aaa 
  margin-top 30px
  text-align center
.article-status.undone
  color red
.article-status
  text-align center
  color #999
.comment-title
  border-left 5px var(--main-color) solid 
  padding-left 10px
  margin 20px 0
</style>
